<template>
  <div>
    <el-main>
      <div v-if="!seeType">
        <el-row type="flex" justify="space-between">
          <!-- <el-col v-if="is_admin_view == 0"> -->
          <el-col>
            <el-button type="primary" @click="dialogVisible = true">添加需求</el-button>
          </el-col>
        </el-row>
        <div>
          <el-table style="width:90%" :header-cell-style="{ background: '#F3F8FE' }" @row-click="rowClick"
            align="center" :data="ListArr" border class="tableHeight">
            <el-table-column align="center" prop="des" width="380" label="需求">
            </el-table-column>
            <el-table-column align="center" prop="status_name" label="需求状态">
            </el-table-column>
            <el-table-column align="center" prop="so_id_name" label="解决人">
            </el-table-column>
            <el-table-column align="center" prop="solve_time" label="解决时间">
            </el-table-column>
            <el-table-column align="center" label="解决方案/处理反馈">
              <template slot-scope="scope">
                <el-button class="see" @click="see(scope.row.id)" type="text">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination" style="width:90%">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="page" :page-size="limit" layout="total, prev, pager, next, jumper" :total="count"
              align='left'></el-pagination>
          </div>
        </div>
      </div>
      <div v-else>
        <el-button type="primary" @click="seeType = false">返回</el-button>
        <el-form :model="seeData" label-width="100px" style="margin-top: 20px;">
          <el-row>
            <el-col :span="12" class="qw_date">
              <el-form-item class="" label="需求">
                <el-input v-model="seeData.des" disabled></el-input>
              </el-form-item>
              <el-form-item class="" label="期望解决时间">
                <el-date-picker :disabled="true" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""
                  v-model="seeData.solve_time">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="解决人">
                    <el-input disabled :placeholder="seeData.so_id_name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="解决时间">
                    <el-input :disabled="true" v-model="seeData.so_time"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>

            <el-col>
              <el-form-item label="解决方案">
                <el-input :disabled="true" type="textarea" v-model="seeData.solve_des"
                  :autosize="{ minRows: 3, maxRows: 10 }">
                </el-input>
              </el-form-item>
            </el-col>

            <el-col>
              <el-form-item label="解决方案附件" class="upload_box">
                <el-upload id="b_upload" class="upload-demo" ref="upload2" action="" :disabled="true"
                  :on-preview="handlePreview" :file-list="seeData.fileObj" :before-remove="beforeRemove">
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </div>
    </el-main>


    <el-dialog :close-on-click-modal='false' title="添加需求" :visible.sync="dialogVisible" width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="需求">
          <el-input :autosize="{ minRows: 3, maxRows: 10 }" type="textarea" v-model="form.des"></el-input>
        </el-form-item>
        <!-- <el-form-item label="解决人">
          <el-select value-key="id" v-model="form.so_id" filterable multiple placeholder="" style="width:80%">
            <el-option v-for="item in SolverList" :key="item.id" :label="item.username" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item class="" label="期望解决时间">
          <el-date-picker type="datetime" placeholder="" v-model="form.solve_time" format="yyyy-MM-dd HH:mm"
            style="width:80%" value-format="yyyy-MM-dd HH:mm">
          </el-date-picker>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <Service />
  </div>
</template>

<script>
import { staff } from '@/api/newuser'
import { mapGetters } from 'vuex'
import { pushIndex, tuserList, demandListOld, createOldDemand, demandInfo } from "@/api"
import Service from '@/components/Service'
export default {
  components: {
    Service
  },
  data() {
    return {
      SolverList: [],
      dialogVisible: false,
      ListArr: [],
      page: 1,
      limit: 10,
      count: 0,
      form: {
        des: "",
        label: "",
        solve_time: "",
        // so_id: [],
        company: this.$store.state.user.name
      },
      seeType: false,
      seeData: {}
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'roles',
      'type',
      'is_admin_view'
    ]),
  },
  mounted() {
    this.demandListOld()
    this.staff(2)
  },
  methods: {
    onSubmit() {
      let data = {
        des: this.form.des,
        label: this.form.label,
        solve_time: this.form.solve_time,
        // so_id: this.form.so_id,
        company: this.$store.state.user.name
      }
      // if (data.so_id.length > 0) {
      //   data.so_id = data.so_id.join(',')
      // } else {
      //   data.so_id = ''
      // }
      createOldDemand(data).then(res => {
        this.dialogVisible = false
        this.demandListOld()
      })

    },
    staff(type) {//走访人员列表
      staff({
        id: this.user_id,
        type: type
      }).then(res => {
        this.SolverList = res
      })
    },
    demandListOld() {
      demandListOld({
        company: this.$store.state.user.name,
        page: this.page,
        limit: this.limit,
      }).then(res => {
        // console.log(res)
        this.count = res.count
        this.ListArr = res.list
      })
    },
    rowClick(row) {
    },
    handlePreview(file, fileList) {
      window.open(file.url)
      // console.log(file, fileList);
      //文件下载，命名为file.name
      // window.open(file.url, '_blank')
      // window.open(file.url, file.name)

      //下载文件    
      // let aDom = document.createElement('a');
      // aDom.style.display = 'none';
      // aDom.href = file.url;
      // aDom.setAttribute('download', file.name);
      // document.body.appendChild(aDom); 
      // aDom.click();
      // document.body.removeChild(aDom);

    },
    beforeRemove() {
      return false
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {

      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        // console.log(currentPage);
        this.page = currentPage
        this.demandListOld()
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    async addSave() {
      try {
        this.dialogVisible = false
        this.$message.success("添加成功")
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    see(id) {
      demandInfo({ id: id }).then(res => {
        // console.log(res, 66);
        if (res.solve_file) {
          if (res.solve_file.length > 0) {
            let arr = [{ name: res.solve_name, url: res.solve_file }]
            res.fileObj = arr
          }
        }
        this.seeData = res
        this.seeType = true
      })
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .el-form-item__content .upload-demo {
  .el-upload {
    display: none;
  }
}
</style>
